<!--
  桌面通知展示组件
  @author 邵鹏坤 2022年10月17日
  用途：
    展示所有全局message记录
-->
<template>
  <Transition name="NoticeBox">
    <div class="notice-container" v-show="noticeShow">
      <div class="container-close">
        <Icon iconClass="icon-qingkong" class="message-clear-icon" @click="store.commit('removeNoticeList', -1)"></Icon>
        <Icon
          iconClass="icon-a-youjiantouzhixiangyoujiantou"
          class="message-close-icon"
          @click="store.commit('changeNotice', false)"
        ></Icon>
      </div>
      <div class="message-body-box">
        <Transition name="NoticeList">
          <TransitionGroup
            name="NoticeList"
            v-if="messageList && messageList.length > 0"
            tag="div"
            class="message-body-container"
          >
            <div class="message-body" v-for="message in messageList" :key="message.id">
              <div class="message-main">
                <Icon
                  :iconClass="parseIconClass(message.type)"
                  class="message-icon"
                  :class="message.type === 'loading' ? 'loading' : ''"
                ></Icon>
                <p class="message">{{ message.message }}</p>
                <div class="message-close" v-if="!message.alive" @click="store.commit('removeNoticeList', message.id)">
                  <Icon iconClass="icon-a-youjiantouzhixiangyoujiantou" class="message-close-icon"></Icon>
                </div>
                <div class="message-close-none" v-else></div>
              </div>
              <div class="message-date">{{ getT(new Date(message.id)) }}</div>
            </div>
          </TransitionGroup>
          <div v-else class="none-box">暂无数据</div>
        </Transition>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, watch } from 'vue'
  import { useStore } from 'vuex'
  import { Message } from '@/winTypes'
  import Icon from '@/views/icon/Icon.vue'
  const messageList = ref<Message[]>()
  const store = useStore()
  const noticeShow = ref(false)
  onBeforeMount(() => {
    messageList.value = store.state.messageList
    noticeShow.value = store.state.noticeShow
  })
  watch(
    () => store.state.messageList,
    () => {
      messageList.value = store.state.messageList
    },
    { deep: true }
  )
  watch(
    () => store.state.noticeShow,
    () => {
      noticeShow.value = store.state.noticeShow
      setTimeout(() => {
        if (store.state.noticeShow) {
          window.addEventListener('click', closeNotice)
        }
      }, 1)
    }
  )
  const closeNotice = (event: any) => {
    if (
      event.target?.getAttribute('class') != 'none-box' &&
      event.target?.getAttribute('class') != 'message-main' &&
      event.target?.getAttribute('class') != 'message' &&
      event.target?.getAttribute('class') != 'message-body' &&
      event.target?.getAttribute('class') != 'message-body-container' &&
      event.target?.getAttribute('class') != 'message-body-box' &&
      event.target?.getAttribute('class') != 'message-close-none' &&
      event.target?.getAttribute('class') != 'message-close-icon' &&
      event.target?.getAttribute('class') != 'message-close' &&
      event.target?.getAttribute('class')?.indexOf('svg-icon') === -1 &&
      event.target?.getAttribute('class') != 'message-container'
    ) {
      store.commit('changeNotice', false)
      window.removeEventListener('click', closeNotice)
    }
  }
  const parseIconClass = (type?: string) => {
    switch (type) {
      case 'success':
        return 'icon-chenggong'
      case 'error':
        return 'icon-cuowu'
      case 'info':
        return 'icon-xinxi'
      case 'warning':
        return 'icon-jinggao'
      case 'loading':
        return 'icon-Loading-a'
      default:
        return 'icon-xinxi'
    }
  }
  const getT = (time: Date) => {
    const y = time.getFullYear()
    let mm = time.getMonth() + 1
    let d = time.getDate()
    let h = time.getHours()
    let m = time.getMinutes()
    let s = time.getSeconds()
    let dateStr = y + '-'
    if (mm < 10) {
      dateStr += '0' + mm
    } else {
      dateStr += mm
    }
    dateStr += '-'
    if (d < 10) {
      dateStr += '0' + d
    } else {
      dateStr += d
    }
    dateStr += ' '
    if (h < 10) {
      dateStr += '0' + h
    } else {
      dateStr += h
    }
    dateStr += ':'
    if (m < 10) {
      dateStr += '0' + m
    } else {
      dateStr += m
    }
    dateStr += ':'
    if (s < 10) {
      dateStr += '0' + s
    } else {
      dateStr += s
    }
    return dateStr
  }
</script>

<style lang="scss" scoped>
  .notice-container ::-webkit-scrollbar {
    // border: none;
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .notice-container ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    background-color: $theme-color;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.3) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.3) 75%,
      transparent 75%,
      transparent
    );
  }
  .notice-container {
    position: fixed;
    width: 20%;
    right: 1%;
    bottom: 6vh;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 999999;
    background-color: $theme-color-noalive-white;
    height: 88vh;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    padding: 1% 1%;

    .message-main {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .message-icon {
        font-size: 64px;
      }
      .message-close,
      .message-close-none {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .message-close-icon {
          transition: 0.4s ease;
        }
      }
      .message-close:hover {
        cursor: pointer;
      }

      .message-close:hover .message-close-icon {
        color: $theme-color;
        transform: translateX(8px);
      }
      .loading {
        animation-name: route;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-timing-function: ease-out;
        @keyframes route {
          0% {
            transform: rotate(360deg) scale(0.6);
            color: $theme-text-color;
          }
          70% {
            color: #2ba8ed;
            transform: rotate(-80deg) scale(1);
          }
          // 80% {
          //   color: $theme-color;
          //   transform: rotate(-300deg) scale(0.6);
          // }
          100% {
            transform: rotate(-360deg) scale(0.6);
            color: $theme-text-color;
          }
        }
      }
    }
    .message-body-box {
      width: 100%;
      height: 85vh;
      overflow-y: auto;
      overflow-x: hidden;
      .message-body-container {
        width: 96%;
        // display: flex;
        // flex-direction: column-reverse;
        // align-items: center;
        position: relative;

        .message-body {
          background-color: $theme-color-noalive-white;
          margin: 8px;
          width: 100%;
          text-align: center;
          border-radius: 10px;
          overflow: hidden;
          padding: 12px 0px;
          z-index: 999999;
          // box-shadow: 0px 0px 2px 0px #4e4e4e;
          backdrop-filter: blur(10px);
          height: 60px;
          transition: 0.8s;
          .message-header {
            height: 20px;
            font-size: 20px;
            .title-right {
              display: flex;
              justify-content: right;
              align-items: center;

              .btn {
                border: none;
                background-color: rgba(255, 255, 255, 0);
                width: 24px;
                height: 20px;
                border-radius: 4px 4px 10px 10px;
                transition: 0.3s ease;
              }

              .zuixiaohua:hover,
              .zuidahua:hover {
                background-color: #cdcdcd;
              }

              .guanbi:hover {
                border-radius: 6px;
                background-color: rgba(232, 17, 35, 1);
              }
            }
          }
          .message {
            padding: 12px 6px;
            width: 48%;
          }
          .message-date {
            color: #acacac;
            font-size: 14px;
            position: absolute;
            bottom: 4px;
            right: 6px;
          }
        }
      }
    }
    .none-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
      text-shadow: #cdcdcd;
    }
    .container-close {
      position: absolute;
      font-size: 26px;
      top: 6px;
      right: 18px;
    }
    .message-close-icon,
    .message-clear-icon {
      transition: 0.4s;
      padding: 0 8px;
    }
    .message-close-icon:hover,
    .message-clear-icon:hover {
      transform: scale(1.1);
      color: $theme-color;
    }
  }
  /* 对移动中的元素应用的过渡 */
  .NoticeList-move,
  .NoticeList-enter-active,
  .NoticeBox-move,
  .NoticeBox-enter-active {
    transition: all 0.5s ease;
  }
  .NoticeBox-leave-active {
    transition: all 0.3s ease;
  }
  .NoticeList-leave-active {
    transition: all 0.3s ease;
    transform-origin: 50% 0%;
  }

  .NoticeList-leave-to {
    opacity: 0;
    transform: translateX(200px);
  }
  .NoticeList-enter-from {
    opacity: 0;
    transform: translateX(100px);
  }
  .NoticeBox-leave-to,
  .NoticeBox-enter-from {
    opacity: 0;
    transform: translateX(100px);
  }
  .NoticeList-leave-active {
    position: absolute;
  }
</style>
